<template>
  <div class="home">
    <van-button @click="goto()">确认</van-button>
    <child :userInfo="userInfo" @showinfo="getUserInfo"></child>
    <div>{{ name }}</div>
    <ul v-show="jokeList && jokeList.length">
      <li v-for="item in jokeList" :key="item.sid">{{ item.passtime }} ---- {{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
import { Button } from 'vant';
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import Child from './components/Child.vue';

export default {
  name: 'Home',
  components: {
    vanButton: Button,
    Child,
  },
  data() {
    return {
      userInfo: {
        userName: '',
        password: '',
      },
      info: {
        info: {
          name: '1',
        },
      },
    };
  },
  computed: {
    ...mapState({
      name: (state) => state.home.vuexName,
      jokeList: (state) => state.home.jokeList,
    }),
    ...mapGetters({ filter: 'filterList' }),
  },
  methods: {
    ...mapActions(['getList']),
    ...mapMutations(['edit']),
    async initInfo() {
      const params = {
        page: 1,
        count: 2,
        type: 'video',
      };
      // this.$loading(true);
      await this.getList(params);

      // const timer = setTimeout(() => {
      //   this.$loading(false);
      // }, 2000);

      // // 清除定时器
      // this.$once('hook:beforeDestroy', () => {
      //   clearTimeout(timer);
      // });

      // 带传参的getters
      // console.log(this.filter('111'));
    },

    goto() {
      // this.$router.push('/about');
      this.edit({ vuexName: 'zyq' });
    },

    getUserInfo(params) {
      console.log(params);
    },
  },
  mounted() {
    this.initInfo();
    // console.log(this.info?.info?.type);
  },
};
</script>

<style scoped lang="less">
.home {
  // background-color: aquamarine;

  & /deep/ .van-button--default {
    background-color: blanchedalmond;
  }
}
</style>
